<template>
<!--  待收货订单-->
  <div id="pages">
    <el-main>
      <div id="sousuo">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="searchObj.orderNumber" placeholder="请输入订单编号" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round @click="QueryAllOrder">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="PendingOrder" style="width: 100%">
        <el-table-column prop="orderId" label="订单ID" width="180"></el-table-column>
        <el-table-column prop="createTime" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="totalPrice" label="总价格" width="180">
        </el-table-column>
<!--        <el-table-column prop="conveyTag" label="订单状态">-->
<!--          <template slot-scope="scope">-->
<!--            <span v-if="scope.row.conveyTag=='P001-1'">待付款</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-2'">待发货</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-3'">待收货</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-4'">已发货</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-5'">已完成</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-6'">已取消</span>-->
<!--            <span v-if="scope.row.conveyTag=='P001-7'">待提货</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="订单进度">
          <template slot-scope="scope">
            <span v-if="scope.row.conveyTag== 'P001-1'">待付款</span>
            <span v-else-if="scope.row.conveyTag== 'P001-2'" style="color: darkorange">待发货</span>
            <span v-else-if="scope.row.conveyTag== 'P001-3'" style="color: blue">待收货</span>
            <span v-else-if="scope.row.conveyTag== 'P001-7'" style="color: blue">待提货</span>
            <span v-else-if="scope.row.conveyTag== 'P001-5'" style="color: green">已完成</span>
            <span v-else-if="scope.row.conveyTag== 'P001-6'" style="color: black">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="payMethod" label="支付方式" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.payMethod=='P002-1'">余额支付</span>
            <span v-if="scope.row.payMethod=='P002-2'">微信支付</span>
            <span v-if="scope.row.payMethod=='P003'">现金支付</span>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="small"
                type="warning"
                round
                icon="el-icon-edit"
                @click="viewBtn(scope.row.orderId)">查看</el-button>
            <el-button
                size="small"
                type="warning"
                round
                icon="el-icon-edit"
                @click="shouhuo(scope.row)">收货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="pageSizeList"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--查看框-->
      <el-dialog title="支付订单" :visible.sync="viewVisible">
        <el-table :data="viewFormDetails" style="width: 100%">
          <!-- 表格列 -->
          <el-table-column prop="orderInfo.orderId" label="订单id"></el-table-column>
          <el-table-column prop="sysUsers.nickName" label="下单用户"></el-table-column>
          <el-table-column prop="orderInfo.createTime" label="日期" width="180"></el-table-column>
          <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="orderDetails.amount" label="数量"></el-table-column>
          <el-table-column prop="orderDetails.price" label="单价"></el-table-column>
          <el-table-column prop="orderDetails.subtotal" label="小计"></el-table-column>
<!--          <el-table-column  label="支付状态" width="180"></el-table-column>-->

        </el-table>
      </el-dialog>
    </el-main>

  </div>
</template>

<script>
export default{
  name: 'pages',
  data() {
    return{
      //用户ID
      sysUsersId:'',
      //表单查询条件
      searchObj: {
        name: '',
        orderNumber: ''
      },
      PendingOrder:[],
      // 当前页号
      pageNo: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 查看框的显示
      viewVisible: false,
      // lable宽度
      formLabelWidth: '120px',
      //对话框表单
      viewFormDetails: [],
    }
  },
  methods:{
    //表单条件查询
    QueryAllOrder() {
      // 查询
      this.pageNo = 1
      this.pendingOrdersListPage()
    },
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.pendingOrdersListPage()
    },
    // 页号改变
    handleCurrentChange(val) {
      this.pageNo = val
      //重新查询
      this.pendingOrdersListPage()
    },
    // 显示查看详情框
    async viewBtn(id) {
      const {data: res} = await this.$http.post(`orderDetails/OrderDate/${id}`);
        this.viewFormDetails = res
        console.log("2222222222",res)
        this.viewVisible = true;
        this.total=res.total
    },
    //待收货订单
    async pendingOrdersListPage(){
      this.sysUsersId=this.$store.state.user.sysUsersId
      console.log('商户sysUsersId',this.sysUsersId)
      const {data: res} = await this.$http.post(`orderInfo/pendingOrdersListPage/${this.pageNo}/${this.pageSize}/${this.sysUsersId}`,this.searchObj)
      this.PendingOrder=res.list
      console.log("待收货",res.list)
      this.total=res.total
    },
    //收货
    async shouhuo(row) {
      try {
        const { data: res } = await this.$http.post(`orderInfo/shouHuo/${row.orderId}`);
        console.log('收货订单', res);
        // 消息提示
        this.$message({
          showClose: true,
          message: '收货成功',
          type: 'success'
        });
        // 再次查询
        this.pendingOrdersListPage();
      } catch (error) {
        console.error('收货请求出错', error);
        this.$message({
          showClose: true,
          message: '收货请求出错',
          type: 'error'
        });
      }
    }

  },
  created() {
    this.pendingOrdersListPage()
  }
}
</script>

<style>

</style>